<template>
  <div
    class="personal-container"
    v-if="personalVisible"
  >
    <div class="personal-box scroll-bar">
      <div class="personal-header">
        <sc-icon
          name="iconguanbi-01"
          @click.native="closeBox"
        ></sc-icon>
      </div>

      <div class="base-info-box">
        <div class="avatar-username-box">
          <!-- 头像 -->
          <div class="avatar">
            <img
              :src="userInfo.avatar ? userInfo.avatar : userInfo.defaultAvatar"
              alt="avatar"
            >
            <input
              type="file"
              accept="image/*"
              class="upload-box"
              @change="uploadFn"
            >
          </div>

          <!-- 用户名 -->
          <template v-if="showSetUsernameBox">
            <div class="set-username-box">
              <el-input
                size="small"
                v-model.trim="userInfo.usernameEdit"
                :placeholder="$t('personal.userNamePlaceholder')"
                maxlength="16"
              ></el-input>
              <p class="input-hint">{{ $t('personal.userNameHint') }}</p>
              <div class="set-operate-btn">
                <el-button
                  type="primary"
                  size="small"
                  @click="saveUsername"
                >{{ $t('operate.save') }}</el-button>
                <el-button
                  size="small"
                  @click="closeSetUsernameBox"
                >{{ $t('operate.cancel') }}</el-button>
              </div>
            </div>
          </template>
          <template v-else>
            <div
              class="username-box"
              v-if="!userInfo.username"
            >
              <div
                class="no-username"
                @click="openSetUsernameBox(1)"
              >{{ $t('personal.notSet') }}</div>
            </div>
            <div
              class="username-box"
              v-else
            >
              <div class="have-username">
                <span>{{ userInfo.username }}</span>
                <sc-icon
                  name="iconbianji"
                  @click.native="openSetUsernameBox(2)"
                ></sc-icon>
              </div>
            </div>
          </template>
        </div>
        <ul class="user-info-box">
          <!-- 真实姓名 -->
          <li>
            <div class="tag-box">
              <span class="tag-name">{{ $t('personal.actualName') }}</span>
              <ul class="tag-content">
                <li>{{ userInfo.actualName }}</li>
              </ul>
            </div>
          </li>
          <!-- 手机号码 -->
          <li>
            <div class="tag-box">
              <span class="tag-name">{{ this.$t('personal.phone') }}</span>
              <ul
                class="tag-content"
                v-if="!showSetPhoneBox"
              >
                <li>{{ userInfo.phone }}</li>
                <li>
                  <el-button
                    type="text"
                    @click="openSetPhoneBox"
                  >{{ $t('operate.modify') }}</el-button>
                </li>
              </ul>
            </div>
            <div
              class="set-wrapper"
              v-if="showSetPhoneBox"
            >
              <template v-if="isNext">
                <div class="set-box">
                  <el-input
                    size="small"
                    :placeholder="$t('personal.phoneNewPlaceholder')"
                    v-model.trim="userInfo.newPhone"
                    maxlength="11"
                    @input="limitIntInput('newPhone', userInfo.newPhone)"
                  >
                  </el-input>
                  <div class="sms-code-box">
                    <el-input
                      size="small"
                      :placeholder="$t('personal.codePlaceholder')"
                      v-model.trim="smsCodeSecond"
                      maxlength="6"
                      @input="limitIntInput('smsCodeSecond', smsCodeSecond)"
                    >
                    </el-input>
                    <el-button
                      size="small"
                      :disabled="true"
                      v-if="showSmsCodeTimer"
                    >{{ smsCodeTimerText }}</el-button>
                    <el-button
                      size="small"
                      @click="getPhoneCode"
                      v-else
                    >{{ isClickGetSmsCode ? $t('operate.reacquire') : $t('operate.get') }}</el-button>
                  </div>
                  <div class="set-operate-btn">
                    <el-button
                      type="primary"
                      size="small"
                      @click="confirmSetPhone"
                    >{{ $t('operate.submit') }}</el-button>
                    <el-button
                      size="small"
                      @click="closeSetPhoneBox"
                    >{{ $t('operate.cancel') }}</el-button>
                  </div>
                </div>
              </template>
              <template v-else>
                <div class="set-box">
                  <el-input
                    size="small"
                    :placeholder="$t('personal.phonePlaceholder')"
                    v-model.trim="userInfo.phone"
                    :disabled="true"
                  >
                  </el-input>
                  <div class="sms-code-box">
                    <el-input
                      size="small"
                      :placeholder="$t('personal.codePlaceholder')"
                      v-model.trim="smsCodeFirst"
                      maxlength="6"
                      @input="limitIntInput('smsCodeFirst', smsCodeFirst)"
                    >
                    </el-input>
                    <el-button
                      size="small"
                      :disabled="true"
                      v-if="showSmsCodeTimer"
                    >{{ smsCodeTimerText }}</el-button>
                    <el-button
                      size="small"
                      @click="getPhoneCode"
                      v-else
                    >{{ isClickGetSmsCode ? $t('operate.reacquire') : $t('operate.get') }}</el-button>
                  </div>
                  <div class="set-operate-btn">
                    <el-button
                      type="primary"
                      size="small"
                      @click="nextFn"
                    >{{ $t('personal.next') }}</el-button>
                    <el-button
                      size="small"
                      @click="closeSetPhoneBox"
                    >{{ $t('operate.cancel') }}</el-button>
                  </div>
                </div>
              </template>
            </div>
          </li>
          <!-- 登录密码 -->
          <li>
            <div class="tag-box">
              <span class="tag-name">{{ $t('personal.loginPassword') }}</span>
              <ul class="tag-content">
                <li>
                  <el-button
                    type="text"
                    v-if="!setPassword && !showSetPasswordBox && !showEditPasswordBox"
                    @click="showSetPasswordBox = true"
                  >{{ $t('personal.notSet') }}</el-button>
                  <el-button
                    type="text"
                    v-if="setPassword && !showEditPasswordBox"
                    @click="showEditPasswordBox = true"
                  >{{ $t('operate.modify') }}</el-button>
                </li>
              </ul>
            </div>
            <div class="set-password-wrapper">
              <!-- 设置密码 -->
              <div
                class="set-password-box"
                v-if="showSetPasswordBox"
              >
                <el-input
                  size="small"
                  :type="showPassword ? 'text' : 'password'"
                  :placeholder="$t('personal.passwordHint')"
                  v-model.trim="userInfo.password"
                  maxlength="16"
                >
                  <i
                    slot="suffix"
                    class="el-input__icon iconfont"
                    :class="showPassword ? 'iconkejian' : 'iconmimabukejian'"
                    @click="changePasswordType(2)"
                  ></i>
                </el-input>
                <el-input
                  class="mt-15"
                  size="small"
                  :type="showRePassword ? 'text' : 'password'"
                  :placeholder="$t('personal.rePasswordHint')"
                  v-model.trim="userInfo.rePassword"
                  maxlength="16"
                >
                  <i
                    slot="suffix"
                    class="el-input__icon iconfont"
                    :class="showRePassword ? 'iconkejian' : 'iconmimabukejian'"
                    @click="changePasswordType(3)"
                  ></i>
                </el-input>
              </div>
              <!-- 修改密码 -->
              <div
                class="edit-password-box"
                v-if="showEditPasswordBox"
              >
                <el-input
                  size="small"
                  :placeholder="$t('personal.oldPasswordHint')"
                  v-model.trim="userInfo.oldPassword"
                  :type="showOldPassword ? 'text' : 'password'"
                  maxlength="16"
                >
                  <i
                    slot="suffix"
                    class="el-input__icon iconfont"
                    :class="showOldPassword ? 'iconkejian' : 'iconmimabukejian'"
                    @click="changePasswordType(1)"
                  ></i>
                </el-input>
                <el-input
                  class="mt-15"
                  size="small"
                  :placeholder="$t('personal.newPasswordHint')"
                  v-model.trim="userInfo.password"
                  :type="showPassword ? 'text' : 'password'"
                  maxlength="16"
                >
                  <i
                    slot="suffix"
                    class="el-input__icon iconfont"
                    :class="showPassword ? 'iconkejian' : 'iconmimabukejian'"
                    @click="changePasswordType(2)"
                  ></i>
                </el-input>
                <el-input
                  class="mt-15"
                  size="small"
                  :placeholder="$t('personal.reNewPasswordHint')"
                  v-model.trim="userInfo.rePassword"
                  :type="showRePassword ? 'text' : 'password'"
                  maxlength="16"
                >
                  <i
                    slot="suffix"
                    class="el-input__icon iconfont"
                    :class="showRePassword ? 'iconkejian' : 'iconmimabukejian'"
                    @click="changePasswordType(3)"
                  ></i>
                </el-input>
              </div>
              <div
                class="set-operate-btn"
                v-if="showSetPasswordBox || showEditPasswordBox"
              >
                <el-button
                  type="primary"
                  size="small"
                  @click="confirmSetPassword"
                >{{ $t('operate.submit') }}</el-button>
                <el-button
                  size="small"
                  @click="closeSetPasswordBox"
                >{{ $t('operate.cancel') }}</el-button>
              </div>
            </div>
          </li>
          <!-- 实名认证 -->
          <li>
            <div class="tag-box">
              <span class="tag-name">{{ $t('personal.crtification') }}</span>
              <ul class="tag-content">
                <li>
                  <span v-if="isCertification">{{ $t('personal.verified') }}</span>
                  <el-button
                    type="text"
                    @click="openCerrification"
                    v-else
                  >{{ $t('personal.crtificationNow') }}</el-button>
                </li>
              </ul>
            </div>
          </li>
          <!-- 微信 -->
          <li>
            <div class="tag-box">
              <span class="tag-name">{{ $t('personal.wechat') }}</span>
              <ul class="tag-content">
                <template v-if="showBindWxBox">
                  <li>
                    <el-button
                      type="text"
                      @click="showBindWxBox = false"
                    >{{ $t('operate.cancel') }}</el-button>
                  </li>
                </template>
                <template v-else>
                  <template v-if="bindWx">
                    <li>Higton</li>
                    <li>
                      <el-button type="text">{{ $t('operate.unbind') }}</el-button>
                    </li>
                    <li>
                      <el-button type="text">{{ $t('operate.rebind') }}</el-button>
                    </li>
                  </template>
                  <li v-else>
                    <el-button
                      type="text"
                      @click="openWxCodeBox"
                    >{{ $t('personal.bindWechat') }}</el-button>
                  </li>
                </template>
              </ul>
            </div>
            <div
              class="wx-code-box"
              v-if="showBindWxBox"
            >
              <img
                src="@/assets/images/bind_wx.png"
                alt="wx"
              >
              <p>{{ $t('personal.wechatHint' )}}</p>
            </div>
          </li>
          <!-- 电子邮件 -->
          <li>
            <div class="tag-box">
              <span class="tag-name">{{ $t('personal.email') }}</span>
              <ul class="tag-content">
                <template v-if="setEmail && !showSetEmailBox">
                  <li>{{ userInfo.email }}</li>
                  <li>
                    <el-button
                      type="text"
                      @click="openSetEmailBox"
                    >{{ $t('operate.modify') }}</el-button>
                  </li>
                </template>
                <li v-if="!setEmail && !showSetEmailBox">
                  <el-button
                    type="text"
                    @click="openSetEmailBox"
                  >{{ $t('personal.addEmail') }}</el-button>
                </li>
              </ul>
            </div>
            <div
              class="set-wrapper last-set-box"
              v-if="showSetEmailBox"
            >
              <div class="set-box">
                <el-input
                  size="small"
                  :placeholder="$t('personal.emailPlaceholder')"
                  v-model.trim="userInfo.newEmail"
                >
                </el-input>
                <div class="sms-code-box">
                  <el-input
                    size="small"
                    :placeholder="$t('personal.codePlaceholder')"
                    v-model.trim="emailCode"
                    maxlength="6"
                    @input="limitIntInput('emailCode', emailCode)"
                  >
                  </el-input>
                  <el-button
                    size="small"
                    :disabled="true"
                    v-if="showEmailCodeTimer"
                  >{{ emailCodeTimerText }}</el-button>
                  <el-button
                    size="small"
                    @click="getEmailCode"
                    v-else
                  >{{ isClickGetEmailCode ? $t('operate.reacquire') : $t('operate.get') }}</el-button>
                </div>
                <div class="set-operate-btn">
                  <el-button
                    type="primary"
                    size="small"
                    @click="confirmSetEmail"
                  >{{ $t('operate.submit') }}</el-button>
                  <el-button
                    size="small"
                    @click="showSetEmailBox = false"
                  >{{ $t('operate.cancel') }}</el-button>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </div>

      <!-- 所属企业及角色 -->
      <div
        class="company-info-box"
        v-if="companyData.length"
      >
        <p class="company-header">{{ $t('personal.company') }}</p>
        <ul class="company-list">
          <li
            v-for="item in companyData"
            :key="item.id"
            @click="changeCompany(item.id)"
          >
            <div class="company-icon">
              <img
                :src="item.icon"
                alt="company"
              >
            </div>
            <div class="company-name-role-box">
              <p
                class="company-name"
                :class="item.id === companyId ? 'company-check-color' : ''"
              >{{ item.name }}</p>
              <p class="company-role">{{ item.role }}</p>
            </div>
            <div class="check-box">
              <i
                class="el-icon-check company-check-color"
                v-if="item.id === companyId"
              ></i>
            </div>
          </li>
        </ul>
      </div>

      <!-- 语言/主题 -->
      <ul class="language-skin-box">
        <li>
          <span class="tag-name">{{ $t('personal.language') }}</span>
          <div
            class="switch-box"
            @click="changeLanguage"
          >
            <div
              class="language-box"
              :class="language === 'zh' ? 'language-left' : 'language-right'"
            >
              <template v-if="language === 'zh'">
                <span class="circle"></span>
                <span>中文</span>
              </template>
              <template v-else>
                <span>English</span>
                <span class="circle"></span>
              </template>
            </div>
          </div>
        </li>
        <li>
          <span class="tag-name">{{ $t('personal.theme') }}</span>
          <!-- 主题 -->
          <Theme />
        </li>
      </ul>

      <!-- 退出登录 -->
      <div
        class="exit-btn"
        @click="exit"
      >{{ $t('personal.signOut') }}</div>
    </div>

    <!-- 认证 -->
    <Certification
      v-if="dialogVisible"
      :dialogVisible.sync="dialogVisible"
      @certificationSuccess="certificationSuccess"
    />
  </div>
</template>

<script>
import md5 from 'md5';
import { setLanguage } from '@/api/user';
import Certification from './Certification.vue';
import Theme from './Theme.vue';
import {
  userInfo,
  userCompany,
  userRole,
  editMobile,
  getMsgCode,
  setAvatar,
  setNickname,
  setPassword,
  getEmailCode,
  setEmail
} from '@/api/user';

export default {
  name: 'PersonalInfo',
  props: {
    personalVisible: {
      type: Boolean,
      default: false
    }
  },
  components: {
    Certification,
    Theme
  },
  computed: {
    // 重新获取
    reacquireText() {
      return this.$t('operate.reacquire');
    }
  },
  data() {
    return {
      userInfo: {
        userId: '1', //用户ID
        avatar: '', //用户头像
        defaultAvatar: require('@/assets/images/avatar_big.png'), //默认头像
        usernameEdit: '', //设置用户名
        username: '', //用户名
        actualName: '', //真实姓名
        phone: '', //手机号
        newPhone: '', //新的手机号
        oldPassword: '', //原密码
        password: '', //登录密码
        rePassword: '', //重复输入登录密码
        wechat: '', //微信
        email: '', //邮箱
        newEmail: '' //新邮箱
      },

      // 修改登录名
      isEditUsername: false, //是否修改登录名
      showSetUsernameBox: false, //是否显示设置用户名元素
      usernameReg: new RegExp("[`~!@#$^&*()=|{}':;',\\[\\].<>《》/?~！@#￥……&*（）——|{}【】‘；：”“'。，、？ ]"), //特殊字符

      // 修改手机号
      showSetPhoneBox: false, //是否显示设置手机号元素
      showSmsCodeTimer: false, //是否显示重新获取手机验证码倒计时
      smsCodeTimerText: this.reacquireText, //手机号验证码倒计时文字
      isClickGetSmsCode: false, //是否点击了获取手机验证码
      times: 60, //倒计时时间
      phoneTimer: '', //修改手机号倒计时
      isNext: false, //是否进入到修改手机号的下一步
      smsCodeFirst: '', //修改手机号第一步的验证码
      smsCodeSecond: '', //修改手机号第二步的验证码
      phoneReg: /^(?:(?:\+|00)86)?1[3-9]\d{9}$/, //手机号码校验

      // 修改密码
      setPassword: false, //是否已设置密码
      showOldPassword: false, //显示旧密码
      showPassword: false, //显示密码
      showRePassword: false, //显示重复输入的密码
      showSetPasswordBox: false, //是否显示设置密码元素
      showEditPasswordBox: false, //是否显示修改密码元素
      passwordReg: /^[A-Za-z0-9]{6,16}$/, //密码校验

      // 认证
      isCertification: false, //是否已认证

      // 微信
      bindWx: false, //是否已绑定微信
      showBindWxBox: false, //是否显示绑定微信元素

      // 邮箱
      setEmail: false, //是否已设置邮箱
      emailCode: '', //邮箱验证码
      showSetEmailBox: false, //设置邮箱元素显示状态
      showEmailCodeTimer: false, //是否显示重新获取邮箱验证码倒计时
      emailCodeTimerText: this.reacquireText, //邮箱验证码倒计时文字
      isClickGetEmailCode: false, //是否点击了获取邮箱验证码
      emailTimes: 60, //邮箱验证码倒计时时间
      emailTimer: '', //修改邮箱倒计时
      emailReg:
        /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/, //邮箱校验

      // 企业及角色
      companyId: 1, //当前公司id
      companyData: [], //所属企业及角色
      switchValue: true, //语言切换
      language: '', //语言
      dialogVisible: false //弹窗显示状态
    };
  },
  created() {
    this.initFn();
  },
  methods: {
    // 初始请求
    initFn() {
      this.getUserInfo();
      this.getCompanyList();
    },
    // 获取用户信息
    getUserInfo() {
      userInfo().then(res => {
        let { id, avatar, name, telephone, email, password, nickname, id_number, wx_openid, language, theme } =
          res.data;
        this.userInfo.userId = id;
        this.userInfo.avatar = avatar;
        this.userInfo.username = nickname;
        this.userInfo.actualName = name;
        this.userInfo.phone = telephone;
        this.userInfo.wechat = nickname;
        this.userInfo.email = email;

        this.setPassword = password === '1' ? true : false;
        this.isCertification = id_number ? true : false;
        this.bindWx = wx_openid ? true : false;
        this.setEmail = email ? true : false;

        this.theme = theme;
        this.language = language;
      });
    },
    // 获取企业信息
    getCompanyList() {
      userCompany().then(res => {
        this.companyData = res.data.list;
      });
    },
    // 提示信息
    hintFn(type = 'info', message, duration = 2000) {
      this.$message({
        type,
        message,
        duration
      });
    },
    // 监听整型数字输入
    limitIntInput(type, value) {
      let limitValue = value.replace(/[^\d]/g, '');
      switch (type) {
        case 'smsCodeFirst':
          this.smsCodeFirst = limitValue;
          break;
        case 'smsCodeSecond':
          this.smsCodeSecond = limitValue;
          break;
        case 'newPhone':
          this.userInfo.newPhone = limitValue;
          break;
        case 'emailCode':
          this.emailCode = limitValue;
          break;
      }
    },
    // 上传用户头像
    uploadFn(e) {
      let file = e.target.files[0];
      if (file.type.indexOf('image') === 0) {
        let formFile = new FormData();
        formFile.append('image', file);
        let fileMaxSize = 2048; //2M
        if (file.size / 1024 > fileMaxSize) {
          let msg = this.$t('personal.avatarSizeError');
          this.hintFn('error', msg);
        } else {
          setAvatar(formFile).then(res => {
            this.userInfo.avatar = res.data.path;
            this.$emit('editAvatar', res.data.path);
            let msg = this.$t('personal.avatarEditSuccess');
            this.hintFn('success', msg);
          });
        }
      } else {
        let msg = this.$t('personal.imgErrorHint');
        this.hintFn('error', msg);
      }
    },
    // 打开用户名设置
    openSetUsernameBox(type) {
      this.showSetUsernameBox = true;
      this.isEditUsername = type === 1 ? false : true;
      this.userInfo.usernameEdit = this.userInfo.username;
    },
    // 保存用户名设置
    saveUsername() {
      if (!this.userInfo.usernameEdit) {
        let msg = this.$t('personal.userNamePlaceholder');
        this.hintFn('error', msg);
        return;
      }
      if (this.usernameReg.test(this.userInfo.usernameEdit)) {
        let msg = this.$t('personal.userNameErrorHint');
        this.hintFn('error', msg);
        return;
      }
      setNickname({
        nickname: this.userInfo.usernameEdit
      }).then(res => {
        let msg =
          this.isEditUsername === 1 ? this.$t('personal.userNameSetSuccess') : this.$t('personal.userNameEditSuccess');
        this.hintFn('success', msg);
        this.showSetUsernameBox = false;
        this.getUserInfo();
      });
    },
    // 关闭用户名设置
    closeSetUsernameBox() {
      this.showSetUsernameBox = false;
      this.userInfo.usernameEdit = '';
    },
    // 打开手机号码设置
    openSetPhoneBox() {
      this.showSetPhoneBox = true;
    },
    // 获取验证码
    getPhoneCode() {
      if (this.isNext) {
        if (!this.userInfo.newPhone) {
          let msg = this.$t('personal.phoneNewPlaceholder');
          this.hintFn('error', msg);
          return;
        }
        if (!this.phoneReg.test(this.userInfo.newPhone)) {
          let msg = this.$t('personal.phoneHint');
          this.hintFn('error', msg);
          return;
        }
      }

      let phone = this.isNext ? this.userInfo.newPhone : this.userInfo.phone;

      getMsgCode({
        telephone: phone,
        smsType: 'EDIT_MOBILE'
      }).then(res => {
        this.showSmsCodeTimer = true;
        this.isClickGetSmsCode = true;
        this.countdownFn();
      });
    },
    // 倒计时
    countdownFn() {
      this.times--;
      this.smsCodeTimerText = `${this.reacquireText}（${this.times}s）`;
      if (this.times === 0) {
        clearTimeout(this.phoneTimer);
        this.phoneTimer = '';
        this.times = 60;
        this.showSmsCodeTimer = false;
      } else {
        this.phoneTimer = setTimeout(() => {
          this.countdownFn();
        }, 1000);
      }
    },
    // 修改手机号的下一步
    nextFn() {
      if (!this.smsCodeFirst) {
        let msg = this.$t('personal.codePlaceholder');
        this.hintFn('error', msg);
        return;
      }
      this.isNext = true;
    },
    // 确认手机号码设置
    confirmSetPhone() {
      if (!this.userInfo.newPhone) {
        let msg = this.$t('personal.phoneNewPlaceholder');
        this.hintFn('error', msg);
        return;
      }

      if (!this.phoneReg.test(this.userInfo.newPhone)) {
        let msg = this.$t('personal.phoneHint');
        this.hintFn('error', msg);
        return;
      }

      if (!this.smsCodeSecond) {
        let msg = this.$t('personal.codePlaceholder');
        this.hintFn('error', msg);
        return;
      }
      editMobile({
        mobile: this.userInfo.phone,
        sms_code: this.smsCodeFirst,
        new_mobile: this.userInfo.newPhone,
        new_sms_code: this.smsCodeSecond
      }).then(res => {
        let msg = this.$t('personal.phoneEditSuccess');
        this.hintFn('success', msg);
        this.closeSetPhoneBox();
        this.closeBox();
        setTimeout(() => {
          this.postMessageFn({
            type: 'reSignIn'
          });
        }, 2000);
      });
    },
    // 关闭手机号码设置
    closeSetPhoneBox() {
      this.showSetPhoneBox = false;
      this.showSmsCodeTimer = false;
      this.smsCodeTimerText = this.reacquireText;
      this.isClickGetSmsCode = false;
      this.times = 60;
      clearTimeout(this.phoneTimer);
      this.phoneTimer = '';
      this.isNext = false;
      this.smsCodeFirst = '';
      this.smsCodeSecond = '';
    },
    // 切换密码的显隐状态 type 1 旧密码 2新密码 3重复密码
    changePasswordType(type) {
      switch (type) {
        case 1:
          this.showOldPassword = !this.showOldPassword;
          break;
        case 2:
          this.showPassword = !this.showPassword;
          break;
        case 3:
          this.showRePassword = !this.showRePassword;
          break;
      }
    },
    // 提交密码设置
    confirmSetPassword() {
      if (!this.showSetPasswordBox) {
        if (!this.userInfo.oldPassword) {
          let msg = this.$t('personal.oldPasswordError');
          this.hintFn('error', msg);
          return;
        }
      }
      if (!this.userInfo.password) {
        let msg = this.$t('personal.passwordError');
        this.hintFn('error', msg);
        return;
      }
      if (!this.passwordReg.test(this.userInfo.password)) {
        let msg = this.$t('personal.passwordRequire');
        this.hintFn('error', msg);
        return;
      }
      if (!this.userInfo.rePassword) {
        let msg = this.$t('personal.rePasswordError');
        this.hintFn('error', msg);
        return;
      }
      if (this.userInfo.password !== this.userInfo.rePassword) {
        let msg = this.$t('personal.passwordErrorRequire');
        this.hintFn('error', msg);
        return;
      }
      if (this.showSetPasswordBox) {
        setPassword({
          set_type: 'set',
          password: md5(this.userInfo.password),
          re_password: md5(this.userInfo.rePassword)
        }).then(res => {
          let msg = this.$t('personal.passwordSetSuccess');
          this.hintFn('success', msg);
          this.closeSetPasswordBox();
          this.getUserInfo();
        });
      } else {
        setPassword({
          set_type: 'edit',
          old_password: md5(this.userInfo.oldPassword),
          password: md5(this.userInfo.password),
          re_password: md5(this.userInfo.rePassword)
        }).then(res => {
          let msg = this.$t('personal.passwordEditSuccess');
          this.hintFn('success', msg);
          this.closeSetPasswordBox();
          this.closeBox();
          setTimeout(() => {
            this.postMessageFn({
              type: 'reSignIn'
            });
          }, 2000);
        });
      }
    },
    // 关闭密码设置
    closeSetPasswordBox() {
      this.showSetPasswordBox = false;
      this.showEditPasswordBox = false;
      this.showOldPassword = false;
      this.showPassword = false;
      this.showRePassword = false;
      this.userInfo.oldPassword = '';
      this.userInfo.password = '';
      this.userInfo.rePassword = '';
    },
    // 打开认证
    openCerrification() {
      this.dialogVisible = true;
    },
    // 认证成功
    certificationSuccess() {
      this.getUserInfo();
    },
    // 打开二维码
    openWxCodeBox() {
      this.showBindWxBox = true;
    },
    // 打开邮箱设置
    openSetEmailBox() {
      this.showSetEmailBox = true;
      this.userInfo.newEmail = '';
      this.emailCode = '';
      this.showEmailCodeTimer = false;
      this.emailCodeTimerText = this.reacquireText;
      this.isClickGetEmailCode = false;
      this.emailTimes = 60;
      clearTimeout(this.emailTimer);
      this.emailTimer = '';
    },
    // 获取邮箱验证码
    getEmailCode() {
      if (!this.userInfo.newEmail) {
        let msg = this.$t('personal.emailPlaceholder');
        this.hintFn('error', msg);
        return;
      }
      if (!this.emailReg.test(this.userInfo.newEmail)) {
        let msg = this.$t('personal.emailErrorHint');
        this.hintFn('error', msg);
        return;
      }

      getEmailCode({
        email: this.userInfo.newEmail
      }).then(res => {
        let msg = this.$t('personal.emailSendHint');
        this.hintFn('success', msg);
        this.showEmailCodeTimer = true;
        this.isClickGetEmailCode = true;
        this.countdownEamilFn();
      });
    },
    // 邮箱验证码倒计时
    countdownEamilFn() {
      this.emailTimes--;
      this.emailCodeTimerText = `${this.reacquireText}（${this.emailTimes}s）`;
      if (this.emailTimes === 0) {
        clearTimeout(this.emailTimer);
        this.emailTimer = '';
        this.emailTimes = 60;
        this.showEmailCodeTimer = false;
      } else {
        this.emailTimer = setTimeout(() => {
          this.countdownEamilFn();
        }, 1000);
      }
    },
    // 保存邮箱设置
    confirmSetEmail() {
      if (!this.userInfo.newEmail) {
        let msg = this.$t('personal.emailPlaceholder');
        this.hintFn('error', msg);
        return;
      }
      if (!this.emailReg.test(this.userInfo.newEmail)) {
        let msg = this.$t('personal.emailErrorHint');
        this.hintFn('error', msg);
        return;
      }
      if (!this.emailCode) {
        let msg = this.$t('personal.codePlaceholder');
        this.hintFn('error', msg);
        return;
      }
      setEmail({
        email: this.userInfo.newEmail,
        email_code: this.emailCode
      }).then(res => {
        let msg = this.setEmail ? this.$t('personal.emailEditSuccess') : this.$t('personal.emailSetSuccess');
        this.hintFn('success', msg);
        this.showSetEmailBox = false;
        this.emailCode = '';
        this.getUserInfo();
      });
    },
    // 切换企业
    changeCompany(id) {
      this.companyId = id;
    },
    // 切换语言
    changeLanguage() {
      let language = '';
      if (this.language === 'zh') {
        this.language = 'english';
        language = 'en';
      } else {
        this.language = 'zh';
        language = 'zh';
      }

      setLanguage({
        language
      }).then(res => {
        this.$i18n.locale = language;
        this.$store.commit('setLanguage', language);
        this.postMessageFn({
          type: 'changeLanguage',
          data: {
            language
          }
        });
      });
    },
    // postMessage
    postMessageFn(data) {
      let parentOrigin = document.referrer;
      window.parent.postMessage(data, parentOrigin);
    },
    // 退出登录
    exit() {
      this.postMessageFn({
        type: 'signOut'
      });
    },
    // 关闭个人信息弹窗
    closeBox() {
      this.$emit('update:personalVisible', false);
      this.$emit('closeHeaderMask');
    }
  }
};
</script>

<style lang="scss" scoped>
.personal-container {
  width: 100%;
  height: 100%;

  .personal-box {
    width: 500px;
    height: calc(100%);
    font-size: 13px;
    background-color: #f5f7fa;
    overflow-y: auto;

    .personal-header {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      width: 100%;
      height: 48px;
      padding: 0 20px;
      font-size: 16px;
      background-color: #fff;

      .sc-icon:hover {
        color: var(--color-primary);
        cursor: pointer;
      }
    }

    .base-info-box {
      background-color: #fff;

      .mt-15 {
        margin-top: 15px;
      }

      ::v-deep .el-input__inner {
        line-height: normal;
      }

      .avatar-username-box {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 100%;
        padding: 0 20px;

        .avatar {
          position: relative;
          display: flex;
          justify-content: center;
          align-items: center;
          width: 120px;
          height: 0;
          padding-bottom: 120px;
          border-radius: 50%;
          overflow: hidden;

          img {
            position: absolute;
            top: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
          }

          .upload-box {
            position: absolute;
            top: 0;
            left: 0;
            width: 120px;
            height: 100%;
            opacity: 0;
          }
        }

        .username-box {
          height: 21px;
          margin: 12px 0 15px;

          .no-username {
            color: var(--color-primary);
            font-size: 18px;
            font-weight: 400;
            cursor: pointer;
          }

          .have-username {
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 16px;

            .sc-icon {
              position: relative;
              top: -1px;
              margin-left: 12px;
              font-size: 18px;
              color: var(--color-primary);
              cursor: pointer;
            }
          }
        }

        .set-username-box {
          width: 100%;
          margin-top: 22px;

          .input-hint {
            margin-top: 10px;
            line-height: 20px;
            font-size: 12px;
            color: #909399;
          }
        }
      }

      .set-wrapper {
        width: 100%;

        &.last-set-box {
          padding-bottom: 1px;
        }

        .set-box {
          width: 100%;

          .sms-code-box {
            display: flex;
            justify-content: space-between;
            gap: 10px;
            margin-top: 15px;
          }
        }
      }

      .set-operate-btn {
        margin: 15px 0;
        text-align: center;
      }

      .user-info-box {
        width: 100%;
        padding: 0 20px;

        > li {
          border-bottom: 1px solid #f2f6fc;

          &:last-child {
            border-bottom: 0;
          }

          .set-password-wrapper {
            ::v-deep .el-input--suffix .el-input__suffix {
              right: 10px !important;
            }
          }

          .tag-box {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;
            height: 47px;

            .tag-content {
              display: flex;
              align-items: center;
              gap: 12px;

              > li {
                line-height: normal;

                .el-button--text {
                  font-size: 13px;
                }
              }
            }
          }
        }
      }

      .wx-code-box {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 20px 0;

        img {
          width: 200px;
          height: 200px;
          margin-bottom: 10px;
        }
      }
    }

    .company-info-box {
      width: 100%;
      margin-top: 10px;
      padding: 0 20px;
      background-color: #fff;

      .company-header {
        padding-top: 15px;
        color: #909399;
      }

      .company-list {
        width: 100%;

        li {
          display: flex;
          align-items: center;
          width: 100%;
          height: 78px;
          border-bottom: 1px solid #f2f6fc;

          &:last-child {
            border-bottom: 0;
          }

          .company-icon {
            flex-shrink: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 48px;
            height: 48px;
            border-radius: 50%;
            overflow: hidden;
            background-color: #ccc;

            img {
              width: 100%;
              object-fit: cover;
            }
          }

          .company-name-role-box {
            flex: 1;
            padding-left: 12px;

            .company-name {
              margin-bottom: 10px;
            }
          }

          .check-box {
            flex-shrink: 0;
            display: flex;
            justify-content: flex-end;
            width: 40px;
            font-size: 24px;
          }

          .company-check-color {
            color: var(--color-primary);
          }
        }
      }
    }

    .language-skin-box {
      width: 100%;
      margin-top: 10px;
      padding: 0 20px;
      background-color: #fff;

      > li {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 50px;
        border-bottom: 1px solid #f2f6fc;

        &:last-child {
          border-bottom: 0;
        }

        .switch-box {
          border-radius: 100em;
          background-color: #ebf1ff;

          .language-box {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 4px;
            height: 20px;
            line-height: normal;
            font-size: 12px;
            cursor: pointer;
          }

          .language-left {
            padding-left: 2px;
            padding-right: 8px;
          }

          .language-right {
            padding-left: 8px;
            padding-right: 2px;
          }

          .circle {
            width: 16px;
            height: 16px;
            border-radius: 50%;
            background-color: var(--color-primary);
          }
        }
      }
    }

    .exit-btn {
      width: 440px;
      height: 32px;
      margin: 20px auto;
      line-height: 32px;
      text-align: center;
      color: #f56c6c;
      font-size: 12px;
      border: 1px solid #e4e7ed;
      background-color: #fff;

      &:hover {
        cursor: pointer;
      }
    }
  }
}
</style>
